<template>
  <view class="main-container">
    <!-- 地图 -->
    <view class="map-container">
      <map style="width: 100%; height: 270px " :markers="markers" :polyline="polyline" :show-location="true" :scale="16" />
      <view class="map-info">
        <view>起点：{{ startLocation }}</view>
        <view>终点：{{ endLocation }}</view>
        <view>预计到达时间：{{ eta }}</view>
      </view>
    </view>

    <!-- 滑动选择器 -->
    <view class="slider-container">
      <u-slider v-model="sliderValue" :min="1" :max="10" :step="1" @change="onSliderChange"></u-slider>
    </view>

    <!-- 车辆类型 -->
    <view class="car-type-container">
      <view class="car-type-left">
        <view v-for="(type, index) in carTypes" :key="index" @click="selectCarType(type)">
          {{ type.name }}
        </view>
      </view>
      <view class="car-type-right">
        <view v-if="selectedCarType" class="car-list">
          <view v-for="(car, index) in cars[selectedCarType]" :key="index">
            {{ car.name }} - 预估价：{{ car.price }}
          </view>
        </view>
      </view>
    </view>

    <!-- 底部信息栏 -->
    <view class="footer-container">
      <view class="info-box">
        <view class="gu">预估<span class="s1">{{ totalCost }}</span>元起</view>
        <view class="xuan">已选{{ selectedCars.length }}个车型</view>
      </view>
      <view class="btn-box">
        <button class="btn" @click="callCar">立即打车</button>
      </view>

    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      markers: [
        { id: 1, latitude: 23.09963, longitude: 113.32452, iconPath: 'path/to/start-marker.png' },
        { id: 2, latitude: 23.09963, longitude: 113.32452, iconPath: 'path/to/end-marker.png' }
      ],
      polyline: [
        {
          points: [
            { latitude: 23.09963, longitude: 113.32452 },
            { latitude: 23.10063, longitude: 113.32552 }
          ],
          color: '#FF0000DD',
          width: 2,
          dottedLine: true
        }
      ],
      startLocation: '广州市天河区',
      endLocation: '广州市海珠区',
      eta: '15分钟',
      sliderValue: 5,
      carTypes: [
        { name: '推荐', value: 'recommended' },
        { name: '一口价', value: 'fixed-price' },
        { name: '经济型', value: 'economy' },
        { name: '出租车', value: 'taxi' },
        { name: '特快车', value: 'express' }
      ],
      selectedCarType: null,
      cars: {
        recommended: [{ name: '红旗', price: 15 }, { name: '宝马', price: 20 }],
        fixedPrice: [{ name: '奔驰', price: 25 }],
        economy: [{ name: '大众', price: 10 }],
        taxi: [{ name: '现代', price: 12 }],
        express: [{ name: '特斯拉', price: 30 }]
      },
      selectedCars: [],
      totalCost: 0
    };
  },
  methods: {
    onSliderChange(e) {
      this.totalCost = e * 10; // 假设每单位滑动代表10元
    },
    selectCarType(type) {
      this.selectedCarType = type.value;
      const carList = this.cars[type.value];
      this.selectedCars.push(...carList);
      this.updateTotalCost();
    },
    updateTotalCost() {
      this.totalCost = this.selectedCars.reduce((acc, curr) => acc + curr.price, 0);
    },
    callCar() {
      console.log('立即打车');
      // 这里可以添加调用服务的逻辑
    }
  }
};
</script>

<style scoped>
.main-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.map-container {
  position: relative;
  height: 40%;
}

.map-info {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 10px;
}

.slider-container {
  height: 20%;
  margin-top: 10px;
}

.car-type-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 20%;
  margin-top: 10px;
}

.car-type-left {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.car-type-right {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.footer-container {
  position: fixed;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 10%;
  margin-top: 10px;
  padding: 10px;
  background-color: white;
  border-radius: 15px;
}
.btn{
  border-top-right-radius: 100px; /* 设置为圆形 */
  border-bottom-right-radius: 100px; /* 设置为圆形 */
  padding: 10px 20px; /* 调整填充以适应文本 */
  width: 130px; /* 根据文本自动调整宽度 */
  color: white;
  background-color: #1cbbb4;

}
.btn-box{
  display: flex;
  justify-content: space-between;
}
.s1{
  font-size: 20px;
  padding-left: 5px;
  padding-right: 5px;
}
.info-box{
  border-top-left-radius: 100px; /* 设置为圆形 */
  border-bottom-left-radius: 100px; /* 设置为圆形 */
  padding: 10px 20px; /* 调整填充以适应文本 */
  width: 250px; /* 根据文本自动调整宽度 */
  color: white;
  height: 66px;
  background-color: #172A23;

}
</style>
